<template>
	<div class="board-column">
		<div class="board-column-header">
			{{ headerText }}
		</div>
		<draggable :list="list" v-bind="$attrs" class="board-column-content" :set-data="setData">
			<div v-for="element in list" :key="element.id" class="board-item">
				{{ element.name }} {{ element.id }}
			</div>
		</draggable>
	</div>
</template>

<script>
	import draggable from 'vuedraggable'

	export default {
		name: 'DragKanbanDemo',
		components: {
			draggable
		},
		data() {
			return {}
		},
		props: {
			headerText: {
				type: String,
				default: '未定义任务名'
			},
			options: {
				type: Object,
				default () {
					return {}
				}
			},
			list: {
				type: Array,
				default () {
					return []
				}
			}
		},
		methods: {
			setData(dataTransfer) {
				// to avoid Firefox bug
				// Detail see : https://github.com/RubaXa/Sortable/issues/1012
				dataTransfer.setData('Text', '')
			}
		}
	}
</script>
<style scoped="scoped">
	.board-column {
		min-width: 300px;
		min-height: 100px;
		height: auto;
		overflow: hidden;
		background: #f0f0f0;
		border-radius: 3px;
	}

	.board-column-header {
		height: 50px;
		line-height: 50px;
		overflow: hidden;
		padding: 0 20px;
		text-align: center;
		background: #333;
		color: #fff;
		border-radius: 3px 3px 0 0;
	}

	.board-column-content {
		height: auto;
		overflow: hidden;
		border: 10px solid transparent;
		min-height: 60px;
		display: flex;
		justify-content: flex-start;
		flex-direction: column;
		align-items: center;

	}

	.board-item {
		cursor: pointer;
		width: 100%;
		height: 64px;
		margin: 5px 0;
		background-color: #fff;
		text-align: left;
		line-height: 54px;
		padding: 5px 10px;
		box-sizing: border-box;
		box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, 0.2);
	}
	
	/* 看板头色 */
	.todo .board-column-header {
		background: #4A9FF9;
		flex: 1;
	}
	
	.working .board-column-header {
		background: #f9944a;
		flex: 1;
	}
	
	.done .board-column-header {
		background: #2ac06d;
	}
	
</style>
